<template>
	<view class="exposed_list">
		<view class="user-info flex-row flex-y-center">
			<view class="exposed_box flex-x-center flex-y-center">
				<image class="avatar" :src="item.avatar"></image>
			</view>
			<view class="info flex-grow-1 flex-list">
				<view class="name">{{ item.nickname }}</view>
				<view class="time">{{ item.add_time }}</view>
			</view>
		</view>
		<view class="exposed-info">
			<view class="info-type">
				{{ item.license_plate_name }}--{{ item.illegality_type_name }}
			</view>
			<view class="info-city">
			</view>
		</view>
		<view class="exposed-describe">
			<view class="">
				{{ item.describe }}
			</view>
		</view>
		<view class="exposed-image flex-list">
			<view :key="imgitem" v-for="imgitem in item.illegality_image">
				<image :src="imgitem"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		item: Object
	})
</script>

<style scoped lang="scss">
	.exposed_list {

		margin-left: 20px;
		margin-right: 20px;
		background: #fff;
		box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, .08);
		border-radius: 12px;
		margin-bottom: 12px;

		.user-info {
			border: 0.5px solid #eceef2;
			.name {
				font-weight: 700;
				font-size: 16px;
				color: #3d3d3d;
				line-height: 18px;
			}
			
			.time {
				font-weight: 400;
				font-size: 12px;
				color: #999;
				line-height: 18px;
				padding-right: 10px;
			}
		}

		.exposed_box {
			width: 64px;
			height: 64px;
			border-radius: 50%;

			.avatar {
				position: relative;
				width: 32px;
				height: 32px;
				border-radius: 50%;
			}
		}

		.exposed-info {
			display: flex;
			justify-content: space-between;
			position: relative;
			align-items: center;
			padding: 20px 20px 8px 20px;

			.info-type {
				font-weight: 400;
				font-size: 15px;
				color: #3d3d3d;
			}
		}

		.exposed-describe {
			font-weight: 400;
			font-size: 12px;
			color: $themeColor;
			line-height: 18px;
			padding-left: 20px;
			padding-bottom: 20px;
		}

		.exposed-image {
			display: flex;
			// grid-column-gap: 10px;
			position: relative;
			align-items: center;
			padding: 0px 5px 12px 5px;
			padding: 0px 5px 12px 5px;

			image {
				width: 105px;
				height: 80px;
				border-radius: 10px 10px 10px 10px;
			}
		}
	}
</style>